.animations-wrap {
    height: 346px;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 140px;
        height: 100%;
        border: 1px solid var(--edit-border-color);
        background-color: var(--edit-bg-color);
        box-sizing: border-box;
        .left-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid var(--edit-border-color-light);
            box-sizing: border-box;
            cursor: pointer;
            &:hover {
                color: var(--edit-color-primary);
            }
            .el-icon {
                margin-right: 5px;
            }
        }
        .left-list {
            .left-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
                border-bottom: 1px solid var(--edit-border-color-light);
                box-sizing: border-box;
                cursor: pointer;
                &:hover {
                    background-color: var(--edit-custome-background-color-4);
                }
                &.active {
                    color: var(--edit-color-primary);
                    background-color: var(--edit-color-primary-light-8);
                }
                .left-item-title {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin-right: 10px;
                }
                .left-item-btn {
                    font-size: 16px;
                    color: var(--edit-text-color-regular);
                    cursor: pointer;
                    &:hover {
                        color: var(--edit-color-danger);
                    }
                }
            }
        }
        .no-data-txt {
            line-height: 50px;
            text-align: center;
            color: var(--edit-text-color-placeholder);
        }
    }
    .content-wrap {
        flex: 1;
        height: 100%;
        border: 1px solid var(--edit-border-color);
        background-color: var(--edit-bg-color);
        box-sizing: border-box;
        margin: 0 20px;
        overflow: hidden;
        .content-main {
            padding: 20px;
            .row-wrap {
                display: flex;
                align-items: center;
                line-height: 32px;
                & + .row-wrap {
                    margin-top: 30px;
                }
                &.flex-start {
                    align-items: flex-start;
                }
                .row-left {
                    margin-right: 15px;
                }
                .row-right {
                    flex: 1;
                }
            }
            .no-data-txt {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--edit-text-color-placeholder);
            }
        }
    }
    .right-wrap {
        width: 240px;
        height: 100%;
        border: 1px solid var(--edit-border-color);
        background-color: var(--edit-bg-color);
        box-sizing: border-box;
        .right-header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid var(--edit-border-color-light);
            box-sizing: border-box;
        }
        .right-content {
            width: 100%;
            height: calc(100% - 50px);
            overflow: hidden;
            .right-preview {
                width: 160px;
                height: 160px;
                line-height: 160px;
                margin: 40px auto 0;
                background-color:   var(--edit-color-primary-light-5);
            }
        }
    }
}